<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #cvs {
            /* 居中 */
            position: absolute;
            top: 20px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <!-- 放时钟的盒子 -->
    <canvas id="cvs" width="600" height="600"></canvas>
</body>
<script>

    // 1. 获取canvas元素
    const cvsDom = document.querySelector('#cvs')

    // 2. 生成canvas绘制元素
    const context = cvsDom.getContext('2d')

    //  9. 定时器，1秒一刷新
    setInterval(function () {

        //  ========================= 开始绘制表盘 ======================

        context.save(); //保存一下初始绘图环境状态  ，一般配合 stroke()使用

        // 10. 定时时器清空上次的绘图
        context.clearRect(0, 0, cvsDom.width, cvsDom.height);

        // 3. 指定中心点位置
        context.translate(300, 300);   // 指定中心点
        context.save(); // 保存中心点位置


        //  4. 绘制大圆
        context.beginPath();  //开始绘制路径
        context.lineWidth = 5   // 线宽
        context.arc(0, 0, 150, Math.PI / 180 * 0, Math.PI / 180 * 360, false); //绘制圆   context.arc(圆心x, 圆心y, 圆半径, 圆起始角度, 结束角度, 是否是顺时针false|true);
        context.stroke(); //绘制出这条线  


        // 5. 绘制小圆
        context.beginPath();
        context.arc(0, 0, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
        context.stroke();


        // 6. ========================= 绘制表盘刻度 ========================================

        // 6.1 绘制小时刻度  12个
        for (let i = 0; i < 12; i++) {

            context.rotate(2 * Math.PI / 12); //指定旋转角度

            //  绘制12个小刻度
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(132, 0) //指定绘制起始位置
            context.lineTo(150, 0) //指定要结束的位置
            context.stroke()    //绘制出这条线  
        }
        // 以防继承  // 保存一下
        context.restore();
        context.save();



        // 6.2  绘制分钟刻度  60
        for (let i = 0; i < 60; i++) {
            context.rotate(2 * Math.PI / 60);

            //  绘制60个小刻度
            context.beginPath();
            context.moveTo(135, 0)
            context.lineTo(150, 0)
            context.stroke()
        }
        context.restore();
        context.save(); // 保存一下



        // ========================= 绘制时针，分针，秒针   =========================
        // 7. 获取小时，分，秒，用日期对象

        const d = new Date()
        const hour = d.getHours() % 12 //小时  // % 取模 运算，摸就是余数
        const min = d.getMinutes()  //分钟
        const sec = d.getSeconds() //秒


        // 8.根据 时 分 秒 换算成对应的换成 时针 分针 秒针 的旋转角度

        // 8.1 绘制时针
        context.beginPath();
        // 先计算时针的旋转角度                                              偏移比例
        context.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2);
        context.lineWidth = 10;

        context.moveTo(-10, 0)
        context.lineTo(60, 0)
        context.stroke()

        context.restore();
        context.save();


        // 8.2 绘制分针
        context.beginPath();
        context.rotate(2 * Math.PI / 60 * hour + 2 * Math.PI / 60 * (min / 60) - Math.PI / 2);
        context.lineWidth = 5;

        context.moveTo(-10, 0)
        context.lineTo(85, 0)
        context.stroke()

        context.restore();
        context.save();


        // 8.3 绘制秒针
        context.beginPath();
        context.rotate(2 * Math.PI / 60 * sec - Math.PI / 2);
        context.lineWidth = 2

        context.moveTo(-10, 0)
        context.lineTo(100, 0)
        context.stroke()

        context.restore();
        context.save();

        context.restore();
        context.restore();   //  ！！！！！ 一定要加


    }, 1000)



</script>

</html>